<template>
   <van-tabbar v-model="active" active-color="#fe4070" inactive-color="#bbb">
       <van-tabbar-item to="/home" :icon="active===0?'wap-home': 'wap-home-o'">首页</van-tabbar-item>
       <van-tabbar-item to="/yiqituan" :icon="active===1?'friends': 'friends-o'">拼团</van-tabbar-item>
       <van-tabbar-item to="/shoppingCart" :info="getAmount" :icon="active===2?'cart': 'cart-o'">购物车</van-tabbar-item>
       <van-tabbar-item to="/account/my" :icon="active===3?'manager': 'manager-o'">我的</van-tabbar-item>
   </van-tabbar>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
    name: "e-footer",
    data () {
        return {
            active: 0,
            tabList: [
                {path:'/home',name:'首页',id:0,icon:'wap-home-o', activeIcon:'wap-home'},
                {path:'/yiqituan',name:'拼团',id:1 ,icon:'wap-home-o', activeIcon:'wap-home'},
                {path:'/shoppingCart',name:'购物车',id:2 ,icon:'wap-home-o', activeIcon:'wap-home'},
                {path:'/account/my',name:'我的',id:3 ,icon:'wap-home-o', activeIcon:'wap-home'},
            ]
        }
    },
    created() {
        console.log(this.$route.fullPath)
        this.tabList.forEach((item, index) => {
            if (item.path === this.$route.fullPath ) this.active = index
        })
    },
    computed:{
        ...mapGetters('cart', ['getAmount'])
    },
}
</script>

<style scoped lang="scss">
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    font-size: 10px;
    color: $e-base;
    padding: 5px 0;
    z-index: 120;
}
</style>
